<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="单据编号" prop="fbillno">
          <el-input v-model="query.fbillno" name="fbillno" clearable />
        </el-form-item>
        <el-form-item label="生产组织" prop="fprdorgid">
          <el-input v-model="query.fprdorgid" name="fprdorgid" clearable />
        </el-form-item>
        <el-form-item label="物料编码" prop="fmaterialid">
          <el-input v-model="query.fmaterialid" name="fmaterialid" clearable />
        </el-form-item>
        <el-form-item label="物料名称" prop="fmaterialname">
          <el-input v-model="query.fmaterialname" name="fmaterialname" clearable />
        </el-form-item>
        <el-form-item label="生产订单编号" prop="fmobillno">
          <el-input v-model="query.fmobillno" name="fmobillno" clearable />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <!-- <Operate :show="open" /> -->
      <el-button type="primary" @click="flowHandler">绑定工艺</el-button>
      <el-button type="success" @click="print">打印</el-button>
      <!-- 选择订单--- {{ ids }} -->
      <el-table :data="tableData" class="mt-3" v-loading="loading" ref="multipleTableRef" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" />
        <el-table-column prop="fmoentryseq" label="行号" min-width="60" />
        <el-table-column prop="fbillno" label="单据编号" min-width="160" />
        <el-table-column prop="fprdorgid_name" label="组织名称" min-width="150" />
        <el-table-column prop="flow_name" label="工艺流程" min-width="200" />
        <el-table-column prop="fmaterialid" label="物料编码" min-width="150" />
        <el-table-column prop="fmaterialname" label="物料名称" min-width="270" />
        <el-table-column prop="fmaterialmodel" label="规格" min-width="150" />
        <el-table-column prop="fmodel" label="型号" width="150" />
        <el-table-column prop="funitid_name" label="单位" />
        <el-table-column prop="fqty" label="数量" />
        <el-table-column prop="fbomid" label="BOM版本" min-width="180" />
        <el-table-column prop="fdocumentstatus" label="单据状态" width="100">
          <template #default="scope">
            <el-tag class="ml-2" type="warning" v-if="scope.row.fdocumentstatus == 0">{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
            <el-tag class="ml-2" type="success" v-else>{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fmoentrystatus" label="生产订单状态" column-key="status" :filters="filterList" :filter-method="filterHandler" min-width="130">
          <template #default="scope">
            <el-tag class="ml-2" type="default">{{ formatFmoentrystatus[scope.row.fmoentrystatus] }}</el-tag>
            <!-- <el-tag class="ml-2" type="success" >{{ formatFmoentrystatus[scope.row.fdocumentstatus] }}</el-tag> -->
          </template>
        </el-table-column>

        <el-table-column prop="back_status" label="备货状态" width="100">
          <template #default="scope">
            <el-tag class="ml-2" type="success">{{ back_statusFormatter[scope.row.back_status] }}</el-tag>
            <!-- <el-tag class="ml-2" type="success" v-else>{{ back_statusFormatter[scope.row.back_status] }}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column prop="fmotype" label="生产订单类型" min-width="160" />
        <el-table-column prop="fmobillno" label="生产订单编号" min-width="160" />

        <el-table-column prop="fplannedstarttime" label="计划开工时间" min-width="180" />
        <el-table-column prop="fplannedcompletiontime" label="计划完工时间" min-width="190" />
        <el-table-column prop="fline" label="生产线" min-width="120" />
        <el-table-column prop="fworkshopid_name" label="生产车间" min-width="150" />

        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <Show @click="checkDetail(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <proCreate @close="close(reset)" :primary="id" :api="api" :ids="ids" />
    </Dialog>

    <!-- <el-dialog v-model="printvisible" title="打印预览" width="90%" style="height: 80%">
      <printTemplate></printTemplate>
    </el-dialog> -->
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, route, ref } from 'vue'
import proCreate from './proCreate.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
// import { useEnabled } from '/admin/composables/curd/useEnabled'
import { ElMessage } from 'element-plus'
import http from '/admin/support/http'
import barCode from './barCode.vue'
import storage from '/admin/utils/storage'
import { useRouter } from 'vue-router'
import { setTableHeight } from '/admin/utils/setHeight.js'
import printTemplate from './printTemplate.vue'

let router = useRouter()

const api = 'production/production/order'

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

let ProductionOrderStatus = ref([])

let printvisible = ref(true)

const getOptions = () => {
  http.get('/options/ProductionOrderStatus').then(r => {
    // console.log(r);
    ProductionOrderStatus.value = r.data.data
    let arr = r.data.data
    let obj = {}
    let list = []
    arr.forEach((item, index) => {
      obj[item.value] = item.label
      list[index] = {}
      list[index].text = item.label
      list[index].value = String(item.value)
    })
    console.log(list)
    console.log(obj)
    storage.setItem('ProductionOrderStatus', obj)

    formatFmoentrystatus.value = obj
    filterList.value = list
  })
}

getOptions()

const formatFmoentrystatus = ref({})
const filterList = ref([])

const formatFdocumentstatus = {
  0: '未审核',
  1: '审核',
}
const back_statusFormatter = ref([])
const filterHandler = (value: string, row, column) => {
  const property = column['property']
  console.log(row[property], value)

  return row[property] === value
}

const checkDetail = data => {
  console.log('详情id', data)
  router.push('/production/productionOrderDetail?id=' + data)
}

const ids = ref([])

// 选中ids
const handleSelectionChange = val => {
  console.log('选中的item', val)
  if (val.length > 0) {
    val.forEach((item, index) => {
      // console.log(item.id)
      ids.value.push(item.id)
      ids.value = [...new Set(ids.value)]
    })
  } else {
    ids.value.length = 0
  }
  console.log('选中数组id', ids.value)
}

// 选择流程
const flowHandler = () => {
  if (ids.value.length <= 0) {
    ElMessage({
      message: '请先选择订单！',
      type: 'warning',
    })
    return
  } else {
    visible.value = true
  }
}

// 打印

let barcodeList = ref([])
const printShow = ref(false)
const PrintNow = ref(false)

const print = () => {
  console.log('打印选中数组id', ids.value)
  if (ids.value.length != 0) {
    getPrint(ids.value)
  } else {
    ElMessage.warning('请选择工单！')
  }
}

const getPrint = arr => {
barcodeList.value = []
  arr.forEach((id, index) => {
    console.log('打印请求的id：', id)
    let itemObj = {
      fbillno: '',
      fmobillno: '',
      fmaterialid: '',
      fmaterialname: '',
      fmaterialmodel: '',
      flow_code: '',
      flow_name: '',
      fqty: '',
      fplannedstarttime: '',
      production_qr_code: '',
      details: [],
      process: [],
    }
    // console.log(arr);

    http.get(`/production/production/order/${id}`).then(r => {
      let res = r.data.data
      // console.log('返回的请求打印数组', res)
      // 开始拼接数组
      for (let key in res) {
        if (itemObj.hasOwnProperty(key)) {
          itemObj[key] = res[key]
        }
      }
      // console.log(itemObj)
      barcodeList.value.push(itemObj)
      console.log(barcodeList.value.length, arr.length)
      if (barcodeList.value.length == arr.length) {
        printShow.value = true
        console.log('缓存的barcodeList：', barcodeList.value)
        storage.setItem('barcodeList', barcodeList.value)
        router.push('/production/printTemplate')
        // printvisible.value = true
      }
      // 弹窗替换成跳转
    })
  })
}

let getstatus = () => {
  http.get('/options/ProductionOrderBackStatus').then(r => {
    let res = r.data.dataprintShodayi
    console.log('备货状态枚举', res)
    back_statusFormatter.value = res.reduce((acc, { value, label }) => {
      acc[value] = label
      return acc
    }, {})

    // back_statusFormatter.value = res
    console.log(back_statusFormatter.value)

    storage.setItem('back_statusFormatter', back_statusFormatter.value)
  })
}

getstatus()
const getDataHandler = () => {
  console.log('接收到子组件传值')
  printShow.value = false
  PrintNow.value = false
}

onMounted(() => {
  search()
  deleted(reset)
  setTableHeight('.table-default')
})
</script>


<style>
.el-table {
  height: 80%;
}
/* .el-dialog__body {
  padding: 0;
} */
</style>

